<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺详情</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
</head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<body>
<div class="row" style="height: 150px;background-color: #f2f5fa;border-radius: 20px">
    <div class="layui-col-md2"id="image" style="padding-left: 50px;padding-top: 30px"><img id="urls" style="object-fit: scale-down;width: 100px;height: 100px;border-radius: 30px"></div>
    <div class="layui-col-md1"style="padding-top: 60px">
        <h2><span id="span">店铺名称</span></h2>
    </div>
</div>
<div class="row">
    <div class="layuimini-container">
        <div class="layuimini-main">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
    </div>
</div>
<body>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    name = parent.name
    img = parent.img
    num = parent.num
    console.log(name)
    console.log(img)
    console.log(num)
    $("#span").html(name);//显示数据
    layui.$('#image').find('img').attr('src', img);
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        table.render({
            skin: 'nob',// 无边框风格
            cellMinWidth: 80,
            cellMinHeight: 80,
            title: '商品列表',
            elem: '#currentTableId',
            url: 'store/getStoreGoods?num=' + num,
            cols: [[
                {field: 'id', width: 150, title: '序号', sort: true, align: "center"},
                {field: 'img', title: '商品图片',width: 200, templet: '#img', align: "center"},
                {field: 'goodsName', width: 150, title: '商品名称', align: "center"},
                {field: 'goodsMoney', width: 150, title: '商品价格', align: "center"},
                {field: 'goodsIll', width: 300, title: '商品详情', align: "center"},
                {field: 'number', width: 150, title: '商品库存', align: "center"},
                {
                    field: 'goodsTime', width: 250, title: '上架时间', sort: true,
                    templet: "<div> {{layui.util.toDateString(d.suretime,'yyyy-MM-dd') }} </div>",
                    align: 'center'
                }
            ]],
            page: {
                layout: ['limit', 'count', 'prec', 'page', 'next', 'skip'],  //自定义分页布局
                limits: [10, 15, 20, 25, 50, 100],
                limit: 5,
                page: true,
                skin: 'line',
                groups: 2, //只显示2个连续页码
                first: "首页",
                last: "尾页"
            }
        });
        // 监听搜索操作
        var $ = layui.$, active = {
            reload: function () {
                var num = $('#demoReload');
                var condition = $('#select')
                //console.log(username.val());
                //执行重载
                table.reload('currentTableId', {
                    page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                        limits: [5, 10, 15, 20, 25],
                        limit: 5,
                        page: true,
                        skin: 'line',
                        groups: 2,//只显示2个连续页码
                        first: "首页",
                        last: "尾页"
                    }
                    , where: {
                        v: num.val(),
                        c: condition.val()
                    }
                }, 'data');
            }
        }
    })
</script>
<script type="text/html" id="img">
    <div><img src="{{d.img}}" style="object-fit: scale-down;border-radius: 50px"></div>
</script>
</body>
<style>
    .layui-table-cell {
        height: auto;
        /* width: auto;
         min-width: 100px;*/
        line-height: 30px;
    }
</style>
</body>
</html>